<template>
    <div class="refund">
        <div class="refund_head">
            退款申请信息
        </div>
        <ul class="refund_ul">
            <li class="refund_ul_li">
                <span>订单号:</span>
                <span>{{tuiMsg.oId}}</span>
            </li>
            <li class="refund_ul_li">
                <span>用户名:</span>
                <span>{{tuiMsg.un}}</span>
            </li>
            <li class="refund_ul_li">
                <span>测算项目:</span>
                <span>{{tuiMsg.que}}</span>
            </li>
            <li class="refund_ul_li">
                <span>退款理由:</span>
                <span>{{tuiMsg.rea}}</span>
            </li>
            <li class="refund_ul_li">
                <span>订单价格:</span>
                <span>{{tuiMsg.price}}</span>
            </li>
        </ul>
        <div class="refund_btn">
            <span @click="refund_order(tuiMsg.ding, 'jj')">拒绝退款</span>
            <span @click="refund_order(tuiMsg.ding, 'ty')">同意退款</span>
        </div>
        <div class="mark" v-if="ifMsg">
            <div class="mark_msg">
                <p>确认{{msg}}退款吗</p>
                <textarea v-if="msg == '拒绝'" v-model="textMsg" name="" id="" cols="30" rows="3" placeholder="请输入退款原因"></textarea>
                <div class="btn">
                    <span @click="ifMsg = !ifMsg">取消</span>
                    <span @click="affirm()">确定</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'refund',
        data() {
            return {
                tuiMsg:{
                    oId: '',
                    que: '',
                    price: '',
                    rea: '',
                    un: '',
                    ding: ''
                },
                msg: '拒绝',
                ifMsg: false,
                textMsg: ''
            }
        },
        methods: {
            refund_order(id, type) {
                // let params = {
                //     consultanceid: id
                // }
                // this.$http.fetchGet('master_confirm', params).then(res => {
                //     if(res.code == 200) {
                //         this.$vux.toast.text('确认成功')
                //     }
                // }, err => {

                // })
                if(type == 'jj'){
                    this.msg = '拒绝'
                    this.ifMsg = true
                } else if (type == 'ty'){
                    this.msg = '同意'
                    this.ifMsg = true
                }
            },
            affirm() {
                if(this.msg == '拒绝') {
                    if(this.textMsg == '') return this.$vux.toast.text('请输入拒绝退款原因')
                    this.master_cancel()
                } else if(this.msg == '同意') {
                    this.master_confirm()
                }
            },
            master_confirm() {
                let params = {
                    consultanceid: this.$route.query.ding
                }
                this.$http.fetchGet('master_confirm', params).then(res => {
                    if(res.code == 200) {
                        this.$vux.toast.text('操作成功')
                        setTimeout(() => {
                            this.$router.push({
                                path: '/my'
                            })
                        }, 500)
                        
                    } else {
                        this.$vux.toast.text('操作失败')
                    }
                }, err => {

                })
            },
            master_cancel() {
                let params = {
                    consultanceid: this.$route.query.ding,
                    refundReason: this.textMsg
                }
                this.$http.fetchGet('master_cancel', params).then(res => {
                    if(res.code == 200) {
                        this.$vux.toast.text('操作成功')
                        setTimeout(() => {
                            this.$router.push({
                                path: '/my'
                            })
                        }, 500)
                    } else {
                        this.$vux.toast.text('操作失败')
                    }
                }, err => {

                })
            }
        },
        mounted() {
            this.tuiMsg = this.$route.query
        }
    }
</script>

<style lang="less" scoped>
    .refund{
        width: 100%;
        height: 100%;
        .refund_head{
            width: 100%;
            text-align: center;
            .lh(88);
        }
        .refund_ul{
            .refund_ul_li{
                width: 100%;
                .padd(0, 20);
                .lh(88);
                border-bottom: 1px solid #f2f2f2;
                box-sizing: border-box;
                span{
                    display: inline-block;
                    &:first-child{
                        .w(150);
                        color: #999;
                    }
                }
            }
        }
        .refund_btn{
            width: 100%;
            .mt(20);
            display: flex;
            justify-content: center;
            span{
                display: block;
                .ml(20);
                .mr(20);
                .lh(60);
                .padd(0, 20);
                border: 1px solid #189BEB;
                color: #189BEB;
                border-radius: 5px;
            }
        }
        .mark{
            position: fixed;
            top: 0;
            bottom: 0;
            width: 100%;
            background: rgba(0,0,0,.3);
            .mark_msg{
                .w(600);
                .h(350);
                background: #fff;
                border-radius: 5px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                p{
                    text-align: center;
                    .mt(80);
                }
                textarea{
                    margin: 0 auto;
                    display: block;
                    .mt(30);
                }
                .btn{
                    display: flex;
                    position: absolute;
                    bottom: 0;
                    left: 0;
                    width: 100%;
                    span{
                        flex: 1;
                        text-align: center;
                        .lh(88);
                        border-top: 1px solid #f2f2f2;
                        &:last-child{
                            border-left: 1px solid #f2f2f2;
                            color: #189BEB;
                        }
                    }
                }
            }
        }
    }
</style>
